<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ImageShower</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	font-size:12px;
}
#controlPane {
	font-size:12px;
	color:#666;
	background-color:#DAFF96;
	position:fixed;
	width:100%;
	height:32px;
	z-index:100;
}
#content {
	position:relative;
	top:35px;
}
</style>
<script type="text/javascript">
String.prototype.endWith = function(s) {
	var res = false;
	var thisLen;
	var srcLen;
	if(s && (srcLen=s.length)<=(thisLen=this.length)) {
		res = true;
		for(var i=0;i<srcLen;i++) {
			if(s.charAt(i)!=this.charAt(thisLen-i-1)) {
				res = false;
			}
		}
	}
	return res;
}
function fillPrefix(n, len, prefix) {
	var s = new Array();
	var str = n.toString();
	var slen = str.length;
	if(slen<=len) {
		for(var i=0,loop=len-slen;i<loop;i++) {
			s.push(prefix);
		}
	}
	s.push(str);
	return s.join("");
}
function read() {
	var imagePath       = $("#imagePath").val();
	var imageNamePrefix = $("#imageNamePrefix").val();
	var imageNameNum1   = $("#imageNameNum1").val();
	var imageNameNum2   = $("#imageNameNum2").val();
	var imageNameSuffix = $("#imageNameSuffix").val();
	var num1            = parseInt(imageNameNum1, 10);
	var num2            = parseInt(imageNameNum2, 10)+num1;
	var str             = new Array();
	var html            = new Array();
	var index = -1;
	var srcIndex;
	var imgNumIndex;
	var tmp;
	str[++index] = imageNamePrefix;
	imgNumIndex = (++index);
	str[++index] = imageNameSuffix;
	str[++index] = "<br/><img src=\"";
	str[++index] = imagePath;
	if(!imagePath.endWith("/") && !imagePath.endWith("\\")) str[++index] = "/";
	str[++index] = imageNamePrefix;
	srcIndex = (++index);
	str[++index] = imageNameSuffix;
	str[++index] = "\" /><br/>";
	for(var i=num1;i<num2;i++) {
		tmp = fillPrefix(i, imageNameNum1.length, "0");
		str[imgNumIndex] = tmp;
		str[srcIndex] = tmp;
		html.push(str.join(""));
	}
	$("#content").html(html.join(""));
	zoomRate = 1;
	$("#zoomRate").html(100);
}
var zoomRate = 1;
var MAX_RATE = 3;
var MIN_RATE = 0.5;
function zoom(addRate) {
	zoomRate += addRate;
	if(zoomRate>=MAX_RATE) {
		zoomRate = MAX_RATE;
	} else if(zoomRate<=MIN_RATE) {
		zoomRate = MIN_RATE;
	} else {}

	$("#zoomRate").html(100*zoomRate);
	$("#content img").css("zoom", zoomRate);
}
</script>
</head>
<body>
<div id="controlPane">
<table>
	<tr>
		<td>圖片路徑</td>
		<td><input type="text" id="imagePath" /></td>
		<td>前綴詞</td>
		<td><input type="text" id="imageNamePrefix" size="5" /></td>
		<td>數字起始</td>
		<td><input type="text" id="imageNameNum1" size="3" /></td>
		<td>後綴詞</td>
		<td><input type="text" id="imageNameSuffix" size="5" /></td>
		<td>從起始往後</td>
		<td><input type="text" id="imageNameNum2" size="3" /></td>
		<td>
			<button onclick="read()">讀取</button>
			<button onclick="$('#content').html('')">清除</button>
			縮放<span id="zoomRate">100</span>%
			<button onclick="zoom(0.25)">(+) 放大</button>
			<button onclick="zoom(-0.25)">(-) 縮小</button>
		</td>
	</tr>
</table>
</div>
<div id="content"></div>
</body>
</html>